<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>旋转小鱼怪</title>
    <script src="/js/vconsole.min.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            font-size: 0;
            margin: 0;
            -webkit-user-select: none;
            user-select: none;
        }

        .scene {
            position: fixed;
            top:0;
            right:0;
            bottom:0;
            left:0;
            display: inline-block;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        xyg {
            position: absolute;
            /* left: 10px;
            bottom: 10px; */
            width: 100px;
            height: 100px;
            background-size: 100% 100%;
            transition: bottom 20ms;
        }

        .xzxyg-left {
            background-image: url('./img/xzxyg-left.png');
        }

        .xzxyg-right {
            background-image: url('./img/xzxyg-right.png');
        }

        enemy {
            position: absolute;
            width: 200px;
            height: 150px;
            background-image: url('./img/enemy.png');
            background-size: 100% 100%;
            transition: bottom 20ms;
        }

        o {
            position: absolute;
            width: 25px;
            height: 25px;
            background-image: url('./img/o.png');
            background-size: 100% 100%;
            transition: width 1000ms, height 1000ms;
        }

        .big-o {
            width: 50px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="scene">
        <xyg id="xzxyg" class="xzxyg-left"></xyg>
    </div>
    <script>
        function getMap(config) {
            let map = [];
            for (let x = 0; x < config.width; x++) {
                map[x] = [];
                for (let y = 0; y < config.height; y++) {
                    map[x][y] = 0;
                }
            }
            return map;
        }

        window.onload = function () {
            const map = getMap({
                width: parseInt(window.screen.width),
                height: parseInt(window.screen.height)
            })
            const xzxyg = new Xzxyg({map});//deviceorientation
            const enemy = new Enemy({map});//deviceorientation
            let os = {};
            document.oncontextmenu=function(e){
                //或者return false;
                e.preventDefault();
            };
            window.addEventListener("deviceorientation", function (event) {
                let alpha = event.alpha;
                let beta = event.beta;
                let gamma = event.gamma;

                if (gamma > 0) {
                    xzxyg.direction = 'right';
                    xzxyg.move(1);
                } else {
                    xzxyg.direction = 'left';
                    document.querySelector('#xzxyg').className = 'xzxyg-left';
                    xzxyg.move(-1);
                }
            }, false);

            if (!window.DeviceMotionEvent) {
                console.log('DeviceMotionEvent is not support!');
            } else {
                window.addEventListener('devicemotion', function (event) {
                    let ax = event.accelerationIncludingGravity.x;
                    let ay = event.accelerationIncludingGravity.y;
                    let az = event.accelerationIncludingGravity.z;
                    if (ax > 20) {
                        let v = ax * 20 > 100 ? 300 : ax * 20;
                        xzxyg.jump({
                            v
                        });
                    }
                })
            }

            let hoverTs = 0;
            window.addEventListener('touchstart', function (event) {
                hoverTs = new Date().getTime();
                let o = os[hoverTs] = xzxyg.holdO = new O({
                    map,
                    bottom: xzxyg.bottom + 100 - 10,
                    fishLeft: xzxyg.left,
                    fishDirLeft: xzxyg.direction == 'right' ? 75 : 5,
                    id: hoverTs,
                    os
                });
                let tim = setTimeout(() => {
                    clearTimeout(tim)
                    xzxyg.holdO.width = 50
                    xzxyg.holdO.height = 50
                }, 10)
                return false;
            })
            window.addEventListener('touchend', function (event) {
                let touchendTs = new Date().getTime();
                console.log(touchendTs, hoverTs, touchendTs - hoverTs)
                xzxyg.hit();
                if (touchendTs - hoverTs > 1000) {
                    for (let i in os) {
                        os[i].move({
                            direction: xzxyg.direction
                        })
                        delete os[i];
                    }
                } else {
                    xzxyg.holdO.width = 25
                    xzxyg.holdO.height = 25
                }
                return false;
            })
        }

        class Target {
            constructor(config={}) {
                this.map = config.map;
            }
            set left(_lef) {
                this._lef = _lef;
                this.self.style.left = `${_lef}px`;
            }
            get left() {
                return this._lef;
            }
            set bottom(_bot) {
                this._bot = _bot;
                this.self.style.bottom = `${_bot}px`;
            }
            get bottom() {
                return this._bot;
            }
            set width(_wid) {
                this._wid = _wid;
                this.self.style.width = `${_wid}px`;
            }
            get width() {
                return this._wid;
            }
            set height(_hei) {
                this._hei = _hei;
                this.self.style.height = `${_hei}px`;
            }
            get height() {
                return this._hei;
            }
        }

        class Xzxyg extends Target{
            constructor(config={}) {
                super({map:config.map})
                this.self = document.querySelector('#xzxyg');
                this.left = 200;
                this.bottom = 10;

                // 状态
                this.isJumping = false;
                this.isMoving = false;

                this._direction = 'left';
            }
            set direction(_direction) {
                this.self.className = `xzxyg-${_direction}`;
                this._direction = _direction;
            }
            get direction() {
                return this._direction;
            }
            hit() {
                this.holdO.move({
                    direction: this.direction
                })
            }
            jump(config = {}) {
                if (!this.isJumping) {
                    let _factor = 1;
                    console.warn('开始跳跃');
                    this.isJumping = true;
                    let v = config.v || 100;
                    let a = 1;
                    let _sBot = parseInt(this.self.style.bottom);
                    this.bottom = _sBot + v * 4 / 100;
                    let inter = setInterval(() => {
                        v -= a * 4;
                        _sBot = (_sBot + _factor * v * 4 / 100);
                        if (_sBot < 0) {
                            clearTimeout(inter);
                            this.bottom = 0;
                            this.isJumping = false;
                        } else {
                            this.bottom = _sBot;
                        }
                    }, 20);
                } else {
                    console.warn('在空中 无法继续跳跃');
                }
            }
            move(size) {
                if (!this.isMoving) {
                    // this.isMoving = true;
                    let _lef = parseInt(this.self.style.left);
                    this.left = _lef + size;
                    let tim = setTimeout(() => {
                        clearTimeout(tim);
                        this.isMoving = false;
                    }, 500)
                } else {
                    console.warn('正在移动中');
                }
            }
        }

        class O extends Target{
            constructor(config = {}) {
                super({map:config.map})
                let fishLeft = config.fishLeft;
                let fishDirLeft = config.fishDirLeft;
                this.self = document.createElement('o');

                // 属性
                this.id = config.id || new Date().getTime();
                // this.os = config.os;
                this.left = config.left || (fishLeft + fishDirLeft) || 10;
                this.bottom = config.bottom || 10;
                this.width = config.width || 25;
                this.height = config.height || 25;

                // 状态
                this.isHitting = false;

                this.self.className = config.className || 'o'

                this.scene = document.querySelector('.scene');
                this.scene.appendChild(this.self);
            }
            move(config = {}) {
                console.log('o move')
                if (!this.isHitting) {
                    console.warn('发射!!!');
                    this.isHitting = true;
                    let _sLef = parseInt(this.self.style.left);
                    let _sBot = parseInt(this.self.style.bottom);
                    let vY = config.vY || 0;
                    let a = 1;
                    let _factor = config.direction == 'right' ? 1 : -1;
                    this.left = _sLef + _factor * 4;
                    _sBot = _sBot + vY * 4 / 100;
                    this.bottom = _sBot;
                    let yCount = 0;
                    let inter = setInterval(() => {
                        vY += a;
                        _sBot = _sBot + vY * 4 / 100;
                        _sLef = _sLef + _factor * 4;
                        this.left = _sLef;
                        this.bottom = _sBot;
                        
                        // 撞击部分的代码
                        // if (isAttacked) {
                        //     what[mapNum].damaged();
                        //     this.scene.removeChild(this.self);
                        //     delete this.os[this.id];
                        // }
                    }, 20)
                    let tim = setTimeout(() => {
                        clearInterval(inter);
                        clearTimeout(tim);
                        this.scene.removeChild(this.self);
                        this.isHitting = false;
                        // delete this.os[this.id]
                    }, 10000)
                } else {
                    console.warn('子弹滑翔中');
                }
            }
        }

        class Enemy extends Target {
            constructor(config={}) {
                super({map:config.map})
                // dom对象
                this.self = document.createElement('enemy');
                
                // 属性
                this.id = config.id || new Date().getTime();
                this.bottom = config.bottom || 10;
                this.left = config.left || 10;
                this.width = config.width || 200;
                this.height = config.height || 150;
                this.blood = config.blood || 100;

                // 状态
                this.isHitting = false;

                this.self.className = config.className || 'enemy'

                this.scene = document.querySelector('.scene');
                this.scene.appendChild(this.self);
            }
            hit() {

            }
        }

    </script>
</body>

</html>